import React from "react";
import { Grid, Image } from "antd-mobile";
import styles from './style.less'

const HomeHotView = ({ data, title, cityName }) => {

    console.log(data);
    return (
        <div>
            <h2>{title}</h2>
            <Grid columns={4} gap={8}>
                {
                    data.map((item) => {
                        return (
                            <div key={item.id}>
                                <Image
                                    src={item.img}
                                    width={96}
                                    height={96}
                                    fit='cover'
                                    style={{ borderRadius: 8 }}
                                />

                                <div style={{
                                    textAlign: "center"
                                }} className={styles['grid-demo-item-block']}>{cityName}-{item.title}</div>
                            </div>

                        )
                    })
                }
            </Grid>
        </div>

    )
}

export default HomeHotView